<template>
    <div class="file-check">
        <HHeader></HHeader>
        <div class="playback">
            <div class="playback-aside" v-style:background-color="website.aside.bgColor">
                <HFileList @handleNodeClick="handleNodeClick"></HFileList>
            </div>
            <div class="playback-main" v-show="url">
                <VVideo id="1" :ws-url="url" v-if="!isImg"></VVideo>
                <img v-else :src="url" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import HHeader from "@/components/Home/Header/HHeader.vue"
import HFileList from "@/components/Home/Aside/VideoFileTree/HFileList.vue";
import { useStore } from "vuex";
import { IFrontAsideState } from "@/store/models/Home/Aside/types";
import { computed, onMounted, onUnmounted, ref } from "vue";
import VVideo from "@/components/VideoStream/VVideo.vue";
import { createBufferUrl } from "@/utils/core";
import { watch } from 'vue'
import { getVideoById } from "@/apis/web/File";
import initFlexLayout from "@/components/Home/Main/flexLayout";
import { IWebsite } from "@/store/types";
const store = useStore();
const frontAside = computed(() => store.state.home.frontAside as IFrontAsideState);
const isImg = ref(false)
const imgs = ref([]);
const url = ref();
const ws = new WebSocket("ws://localhost:3000/videoBuffer");
ws.onopen = () => { }
ws.onmessage = (e) => {
    if (isImg.value) {
        url.value = createBufferUrl(e.data, { type: 'image/jpeg' });
        imgs.value.push(url.value)
        return;
    }
    url.value = createBufferUrl(e.data, { type: 'video/mp4' });
    setTimeout(() => {
        initFlexLayout('.playback-main', {
            padding: 50,
            isResize: true
        })
    }, 500);
};
const website = computed(() => store.state.website.data as IWebsite);
const handleNodeClick = async (node: any) => {
    console.log(node);
    if (['jpg', 'png', 'bmp'].includes(node.extname)) {
        isImg.value = true;
    } else {
        isImg.value = false;
    }
    if (node.extname) {
        ws.send(node.path)
    }

    if (node.children && node.children.length > 0) return;
    node.parent && (node.parent.expanded = true)
}


watch(() => url.value, (newVal) => {
    console.log(newVal);
})

onUnmounted(() => {
    ws.close();
})

</script>
<style scoped lang="less">
.file-check {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .playback {
        flex: 1;
        display: flex;

        .playback-aside {

            // max-width: 300px;
            .el-card {
                margin: 0;
            }
        }

        .playback-main {
            flex: 1;
            height: auto;
            display: flex;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .v-video {
                width: calc(50% - 1px);
            }
        }
    }
}
</style>